<template>
  <layout title="选择地址" background="#fff">
    <view class="screen" style="height: 100%">
      <view v-show="addListShow">
        <view class="top">
          <view class="back" @tap="back1">
            <image
              src="../../static/aidex/images/back.png"
              style="height: 50rpx; width: 50rpx"
            ></image>
          </view>
          <view class="search-box" :class="addListShow ? 'search-box1' : ''">
            <view class="region" @tap="chooseCityHandle">
              {{ currentRegion ? String(currentRegion.district) : "" }}
              <!-- <image src="../../static/aidex/images/down.png" class="region-img"></image> -->
            </view>
            <view class="shuxian"></view>
            <input @input="getsuggest" placeholder="请输入您的地址" />
          </view>
        </view>
        <!--关键词输入提示列表渲染-->
        <view class="add-list-box">
          <scroll-view class="add-list" scroll-y>
            <view
              class="add-item"
              v-for="(item, index) in suggestion"
              :key="index"
            >
              <!--绑定回填事件-->
              <view @tap="backfill" :data-name="item.title">
                <!--根据需求渲染相应数据-->
                <!--渲染地址title-->
                <view class="title">{{ item.title }}</view>
                <!--渲染详细地址-->
                <view class="add">{{ item.district }}{{ item.addr }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>

      <view v-show="!addListShow && !chooseCity">
        <!--地图容器-->
        <view class="top" style="top: 90px">
          <!-- <view class="back" @tap="back1">
						<image src="../../static/aidex/images/back.png" class="region-img"></image>
					</view> -->
          <view class="search-box">
            <view class="region" @tap="chooseCityHandle">
              {{ currentRegion ? currentRegion.district : "" }}
              <!-- <view>
								<image src="../../static/aidex/images/back.png" class="region-img"></image>
							</view> -->
            </view>
            <!-- <view class="shu"></view> -->
            <view class="shuxian"></view>
            <view class="placeholder" @tap="showAddList">请输入您的地址</view>
          </view>
          <view
            class="button-sub"
            @tap="selectedOk"
            hover-class="button-sub_hover"
            >完成</view
          >
        </view>
        <view class="container">
          <view id="map" style="width: 100%; height: 40vh"> </view>
          <cover-image
            class="container-location"
            :src="getImgSrc('/user/icon_location.png')"
            mode="widthFix"
            @tap="getLocation"
          />
        </view>
        <scroll-view class="near-list" scroll-y>
          <!--绑定回填事件-->
          <view
            class="near-item"
            v-for="(item, index) in nearList"
            :key="index"
          >
            <view
              class="current-site iconfont icon-location"
              v-if="item.id === selectedId"
            ></view>
            <!--根据需求渲染相应数据-->
            <view @tap="chooseCenter(item)" :id="index" :data-name="item.title">
              <!--渲染地址title-->
              <view
                class="title"
                :class="item.id === selectedId ? 'title1' : ''"
                >{{ item.title }}</view
              >
              <!--渲染详细地址-->
              <view class="add" :class="item.id == selectedId ? 'add1' : ''">{{
                item.addr
              }}</view>
            </view>
          </view>
        </scroll-view>
        <!-- <view class="bottom-box">
					<button @tap="selectedOk">确认地址</button>
				</view> -->
      </view>

      <view class="region-box" v-show="chooseCity">
        <view class="region-top">
          <view class="region-back" @tap="back2">
            <image
              src="../../static/aidex/images/back.png"
              style="height: 50rpx; width: 50rpx"
            ></image>
          </view>
          <view class="region-title">选择城市</view>
        </view>
        <view class="region-tabs">
          <text class="tab" @tap="showProvince">{{ currentProvince }}</text>
          <text class="tab" @tap="showCity" v-if="!regionShow.province">{{
            currentCity
          }}</text>
          <text class="tab" @tap="showDistrict" v-if="regionShow.district">{{
            currentDistrict
          }}</text>
        </view>
        <scroll-view scroll-y style="height: 100%; min-height: 1rpx">
          <view class="region-list" v-if="regionShow.province">
            <view
              v-for="item in regionData.province"
              :class="[
                currentRegion.province === item.name && 'active',
                'region-item',
              ]"
              :key="item.adcode"
            >
              <view
                :data-id="item.adcode"
                :data-name="item.name"
                @tap="selectProvince"
              >
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
          <view class="region-list" v-if="regionShow.city">
            <view
              v-for="item in regionData.city"
              :class="[
                currentRegion.city === item.name && 'active',
                'region-item',
              ]"
              :key="item.adcode"
            >
              <view
                :data-id="item.adcode"
                :data-name="item.name"
                @tap="selectCity"
              >
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
          <view class="region-list" v-if="regionShow.district">
            <view
              v-for="item in regionData.district"
              :class="[
                currentRegion.district === item.name && 'active',
                'region-item',
              ]"
              :key="item.adcode"
            >
              <view
                :data-id="item.adcode"
                :data-name="item.name"
                :data-location="item.center"
                @tap="selectDistrict"
              >
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </layout>
</template>
<script>
import { getSetting, getLocation } from "@/common/location.js";
import AMapLoader from "@amap/amap-jsapi-loader";
import _ from "lodash";
const app = getApp();
export default {
  data() {
    return {
      labelsLayer: null,
      map: null,
      nvabarData: {
        showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
        title: "选择地址", //导航栏 中间的标题
        white: false, // 是就显示白的，不是就显示黑的。
        address: "", // 加个背景 不加就是没有
      },
      height: app.globalData.navheight,
      addListShow: false,
      chooseCity: false,
      regionShow: {
        province: false,
        city: false,
        district: true,
      },
      regionData: {},
      currentRegion: {
        province: "选择城市",
        city: "选择城市",
        district: "选择城市",
      },
      currentProvince: "选择城市",
      currentCity: "选择城市",
      currentDistrict: "选择城市",
      latitude: "",
      longitude: "",
      centerData: {},
      nearList: [],
      suggestion: [],
      selectedId: "",
      defaultKeyword: "小区",
      keyword: "K",
      index: "", //地址列表 下标
    };
  },
  watch: {},
  onLoad: function (e) {
    var lat = e ? e.lat : "";
    var lon = e ? e.lon : "";
    if (lon && lat) {
      this.latitude = lat;
      this.longitude = lon;
    }
    this.initMap().then(() => {
      this.getUserLocation();
    });
  },
  methods: {
    reLocation() {
      this.map.setCenter([this.longitude, this.latitude], true);
    },
    async initMap() {
      const self = this;
      if (this.map) {
        return Promise.resolve();
      }
      uni.showLoading();
      return new Promise((res) => {
        AMapLoader.load({
          key: "2d01e5cd2e390a130fd215d4014594fa", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: "1.1", // AMapUI 版本
            plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
          },
          Loca: {
            // 是否加载 Loca， 缺省不加载
            version: "2.0", // Loca 版本
          },
        }).then((AMap) => {
          self.map = new AMap.Map("map", {
            zoom: 17, //初始化地图级别
            center: self.vuex_myAddress.lon
              ? [
                  Number(self.vuex_myAddress.lon),
                  Number(self.vuex_myAddress.lat),
                ]
              : undefined,
          });
          self.map.on("complete", function () {
            uni.hideLoading();
            console.log(
              "地图图块加载完毕！当前地图中心点为：" + self.map.getCenter()
            );
            res();
          });
          self.map.on("touchend", (e) => {
            const { lat, lng } = self.map.getCenter();
            self.latitude = lat;
            self.longitude = lng;
            self.nearby_search();
          });
        });
      });
    },
    //重新定位
    reload: function () {
      this.onLoad();
    },
    //整理目前选择省市区的省市区列表
    async getRegionData() {
      let self = this;
      const res = await this.$u.api.map(
        "https://restapi.amap.com/v3/config/district",
        {
          subdistrict: 3,
          extensions: "base",
        }
      );

      let cityList = [];
      let districtList = [];
      res.districts[0].districts.every((province) => {
        if (self.currentRegion.province !== province.name) return true;
        if (
          province.name == "北京市" ||
          province.name == "天津市" ||
          province.name == "上海市" ||
          province.name == "重庆市"
        ) {
          cityList.push(province.districts);
        } else {
          // 拿到地级市
          cityList = province.districts || [];
        }
        return false;
      });

      cityList.every((city) => {
        if (city.name !== self.currentRegion.city) return true;
        districtList = city.districts;
        return false;
      });

      self.regionData = {
        province: res.districts[0].districts,
        city: cityList,
        district: districtList,
      };
    },
    //地图标记点
    addMarker: function (data) {
      if (this.labelsLayer) {
        this.map.remove(this.labelsLayer);
        this.labelsLayer = null;
      }
      this.map.setCenter([data.longitude, data.latitude], true);
      const labelMarker = new AMap.LabelMarker({
        position: [data.longitude, data.latitude],
        opacity: 1,
        zIndex: 99,
        icon: {
          image: "/web/xcx/static/aidex/images/dingwei.png",
          anchor: "bottom-center",
          size: [25, 25],
          // clipOrigin: [459, 92],
          // clipSize: [50, 68],
        },
        text: {
          content: data.title,
          direction: "top",
          style: {
            fontSize: 15,
            fillColor: "#666",
            padding: [3, 10],
            backgroundColor: "#fff",
            borderColor: "#eaeaea",
            borderWidth: 1,
          },
        },
      });

      this.labelsLayer = new AMap.LabelsLayer({
        collision: true,
      });
      this.labelsLayer.add(labelMarker);
      this.map.add(this.labelsLayer);
      this.currentRegion = {
        ...this.currentRegion,
        province: data.province,
        city: data.city,
        district: data.district,
      };
      uni.hideLoading();
    },
    //点击选择搜索结果
    backfill: function (e) {
      var id = e.currentTarget.id;
      let name = e.currentTarget.dataset.name;
      for (var i = 0; i < this.suggestion.length; i++) {
        if (i == id) {
          //console.log(this.suggestion[i])
          this.centerData = this.suggestion[i];
          this.addListShow = false;
          this.latitude = this.suggestion[i].latitude;
          this.longitude = this.suggestion[i].longitude;
          this.keyword = this.suggestion[i].title;
          this.nearby_search();
        }
      }
    },
    //点击选择地图下方列表某项
    chooseCenter: function (item) {
      this.selectedId = item.id;
      this.centerData = { ...item };
      this.latitude = item.latitude;
      this.longitude = item.longitude;
      this.addMarker({ ...item });
    },
    //显示搜索列表
    showAddList: function () {
      this.addListShow = true;
    },
    // 根据关键词搜索附近位置
    async nearby_search() {
      var self = this;
      this.nearList = [];
      uni.showLoading({
        title: "加载中",
      });
      let res;
      try {
        res = await self.$u.api.map(
          "https://restapi.amap.com/v5/place/around",
          {
            keyword: self.keyword, //搜索关键词
            location: `${self.longitude},${self.latitude}`,
            radius: "1000",
            page_size: 25,
            page_num: 1,
          }
        );
      } catch (err) {
        console.error(err);
      }
      uni.hideLoading();
      if (!res || !res.pois) return;
      const sug = res.pois.map((item) => {
        const [lo, la] = item.location.split(",");
        return {
          // 获取返回结果，放到sug数组中
          title: item.name,
          id: item.id,
          addr: item.address,
          province: item.pname,
          city: item.cityname,
          district: item.adname,
          latitude: la,
          longitude: lo,
        };
      });
      if (sug.length === 0) return;
      self.selectedId = sug[0].id;
      self.centerData = sug[0];
      (self.nearList = sug), (self.suggestion = sug);
      self.addMarker(sug[0]);
    },
    //根据关键词搜索匹配位置
    getsuggest: function (e) {
      var _this = this;
      var keyword = e.detail.value;

      _this.addListShow = true;
      this.$u.api
        .map("https://restapi.amap.com/v3/assistant/inputtips", {
          keywords: keyword,
          location: `${_this.longitude},${_this.latitude}`,
          city: this.currentRegion.adcode,
        })
        .then((res) => {
          console.log("[ res ]-468", res);
          const sug = res.tips
            .map((d) => {
              if (_.isEmpty(d) || _.isEmpty(d.location)) return;
              const [la, ln] = d.location.split(",");
              return {
                // 获取返回结果，放到sug数组中
                title: d.name,
                id: d.id,
                addr: d.address,
                city: d.district,
                latitude: la,
                longitude: ln,
              };
            })
            .filter(Boolean);
          _this.suggestion = sug;
          _this.nearList = sug;
          _this.keyword = keyword;
        });
    },
    //打开选择省市区页面
    chooseCityHandle: function () {
      let self = this;
      self.getRegionData();
      self.chooseCity = true;
      self.regionShow = {
        province: false,
        city: false,
        district: true,
      };
      self.currentProvince = self.currentRegion.province;
      self.currentCity = self.currentRegion.city;
      self.currentDistrict = self.currentRegion.district;
    },
    //选择省
    showProvince: function () {
      this.regionShow = {
        province: true,
        city: false,
        district: false,
      };
    },
    //选择城市
    showCity: function () {
      this.regionShow = {
        province: false,
        city: true,
        district: false,
      };
    },
    //选择地区
    showDistrict: function () {
      this.regionShow = {
        province: false,
        city: false,
        district: true,
      };
    },
    //选择省之后操作
    selectProvince: function (e) {
      let self = this;
      let id = e.currentTarget.dataset.id;
      let name = e.currentTarget.dataset.name;
      self.currentProvince = name;
      self.currentCity = "请选择城市";
      const provinceList = self.regionData.province;

      if (
        name == "北京市" ||
        name == "天津市" ||
        name == "上海市" ||
        name == "重庆市"
      ) {
        self.regionData = {
          province: self.regionData.province,
          city: provinceList.find((d) => d.adcode === id).districts,
          district: self.regionData.district,
        };
      } else {
        // let bj = self.regionShow;
        self.regionData = {
          province: self.regionData.province,
          city: provinceList.find((d) => d.adcode === id).districts,
          district: self.regionData.district,
        };
      }
      self.showCity();
    },
    //选择城市之后操作
    selectCity: function (e) {
      let self = this;
      let id = e.currentTarget.dataset.id;
      let name = e.currentTarget.dataset.name;

      self.currentCity = name;
      self.currentDistrict = "请选择城市";
      const dis = self.regionData.city.find((d) => d.adcode === id);

      self.regionData = {
        province: self.regionData.province,
        city: self.regionData.city,
        district: dis ? dis.districts : [],
      };
      this.showDistrict();
    },
    //选择区县之后操作
    selectDistrict: function (e) {
      let self = this;
      let id = e.currentTarget.dataset.id;
      let name = e.currentTarget.dataset.name;
      let [longitude, latitude] = e.currentTarget.dataset.location.split(",");
      self.currentDistrict = name;
      self.latitude = latitude;
      self.longitude = longitude;
      self.currentRegion = {
        ...self.currentRegion,
        province: self.currentProvince,
        city: self.currentCity,
        district: name,
        adcode: id,
      };
      self.chooseCity = false;
      self.keyword = self.defaultKeyword;
      self.nearby_search();
    },
    //返回上一页或关闭搜索页面
    back1: function () {
      if (this.addListShow) {
        this.addListShow = false;
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    //关闭选择省市区页面
    back2: function () {
      this.chooseCity = false;
    },
    //确认选择地址
    selectedOk: async function () {
      var _this = this;
      let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
      let prevPage = pages[pages.length - 2];
      prevPage.centerData = _this.centerData;
      uni.navigateBack({
        // 返回并执行上一页面方法
        success: function () {
          // prevPage.setAddress({
          //   storeAddress: _this.centerData,
          // }); // 执行前一个页面的方法
        },
      });
    },
    // 判断用户是否拒绝地理位置信息授权，拒绝的话重新请求授权
    getUserLocation: function (qqmapsdk) {
      const that = this;
      getSetting().then(() => {
        that.getLocation();
      });
    },
    // 获取定位当前位置的经纬度
    getLocation: function () {
      let self = this;
      getLocation().then(
        (res) => {
          let latitude = res.latitude;
          let longitude = res.longitude;
          if (self.latitude && self.longitude) {
            latitude = self.latitude;
            longitude = self.longitude;
          }
          self.$u.api
            .map("https://restapi.amap.com/v3/geocode/regeo?output=json", {
              location: `${self.longitude},${self.latitude}`,
            })
            .then((res) => {
              self.latitude = latitude;
              self.longitude = longitude;
              self.reLocation();
              self.currentRegion = res.regeocode.addressComponent;
              self.keyword = self.defaultKeyword;
              self.nearby_search();
            });
        },
        (err) => {
          uni.hideLoading({});
          uni.showToast({
            title: "定位失败",
            icon: "none",
            duration: 1500,
          });
          setTimeout(function () {
            uni.navigateBack({
              delta: 1,
            });
          }, 1500);
        }
      );
    },
  },
};
</script>
<style lang="scss">
.top {
  width: 100%;
  /* position: fixed; */
  top: 0;
  left: 0;
  padding: 20rpx 20rpx;
  z-index: 999;
  overflow: hidden;
}
.back {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #666;
  text-align: center;
  background: rgb(255, 255, 255);
  font-size: 50rpx;
  border-radius: 50%;
  float: left;
}
.back cover-image {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  margin-top: 15rpx;
}
.search-box {
  width: 600rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
  background: rgb(255, 255, 255);
  /* margin-left: 20rpx; */
  float: left;
  overflow: hidden;
  display: flex;
}
.search-box1 {
  border: 1px solid #ccc;
  border-radius: 35rpx;
  background: #eee;
}
.region-img {
  width: 20rpx;
  height: 20rpx;
  position: absolute;
  right: 16rpx;
  top: 28rpx;
}
.search-box .region {
  width: 199rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #282828;
  text-align: center;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #f5f5f5;
  position: relative;
  padding: 0 44rpx 0 20rpx;
  box-sizing: border-box;
  &-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #000000;
    line-height: 36rpx;
  }
}
/* .search-box .region::after {
  content: "∨";
  position: absolute;
  right: 20rpx;
  font-size: 20rpx;
  top: 0;
  width: 10rpx;
  color: #aaa;
  background: transparent;
} */
.search-box .shuxian {
  width: 2rpx;
  height: 70rpx;
  float: left;
  background: #ccc;
}
.search-box input {
  width: 398rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  color: #282828;
  padding: 0rpx 20rpx;
  box-sizing: border-box;
  float: left;
}
.search-box .placeholder {
  width: 398rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  color: #ccc;
  padding: 0 20rpx;
  box-sizing: border-box;
  float: left;
  background: #f5f5f5;
}
.top .button-sub {
  width: 100rpx;
  height: 70rpx;
  line-height: 70rpx;
  color: #4e95fc;
  font-size: 32rpx;
  text-align: center;
  margin-right: 10rpx;
  border-radius: 10rpx;
  float: left;
}
.top .button-sub_hover {
  background: #ddd;
}
.add-list-box {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 998;
  /* padding-top: 150rpx; */
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.add-list {
  width: 100%;
  height: 1000rpx;
}
.add-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx;
  text-align: left;
  border-top: 1px solid #eee;
}
.add-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current-site-icon {
  width: 70rpx;
  height: 70rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.near-list {
  height: 50vh;
  box-sizing: border-box;
}
.near-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx 30rpx 90rpx;
  text-align: left;
  border-bottom: 1px solid #eee;
  position: relative;
}
.current-site {
  font-size: 40rpx;
  color: #4e95fc;
  position: absolute;
  top: 40rpx;
  left: 30rpx;
}
.near-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.near-item .add {
  color: #b3b3b3;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.near-item .title1 {
  color: #4e95fc;
}
.near-item .add1 {
  color: #b3b3b3;
}
.bottom-box {
  width: 100%;
  padding: 20rpx;
  background: #fff;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 88;
  overflow: hidden;
}
.bottom-box button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0;
  border: none;
  background: #3095f9;
  color: #fff;
  font-size: 36rpx;
}

.region-box {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}
.region-box .region-top {
  position: relative;
  font-size: 40rpx;
  color: #282828;
  font-weight: bold;
  line-height: 100rpx;
  text-align: center;
}
.region-box .region-back {
  font-size: 0;
  text-align: center;
  position: absolute;
  top: 25rpx;
  left: 0;
}
.region-box .region-tabs {
  line-height: 60rpx;
  font-size: 20rpx;
}
.region-tabs .tab {
  position: relative;
  min-width: 100rpx;
  /* max-width: 200rpx; */
  line-height: 50rpx;
  font-size: 24rpx;
  color: #3095f9;
  color: #000;
  text-align: center;
  /* border: 1rpx solid #ddd; */
  border-left: 1rpx solid transparent;
  background: #eee;
  border-radius: 6rpx;
  display: inline-block;
  margin: 20rpx 0 20rpx 20rpx;
  /* padding: 3rpx 14rpx 3rpx 20rpx;  */
  padding: 0rpx 20rpx;
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
}
/*.region-tabs .tab:nth-of-type(1)::before{
  content: '';
  opacity: 0;
  display: none;
  position: absolute;
  height: 0rpx;
  width: 0rpx;
  border:21rpx solid transparent;
  border-left: 21rpx solid white;
  left:-1rpx;
  top: 1rpx;
}
.region-tabs .tab::before{
  content: '';
  display: block;
  position: absolute;
  height: 0rpx;
  width: 0rpx;
  border:21rpx solid transparent;
  border-left: 21rpx solid white;
  left:-1rpx;
  top: 1rpx;
}
.region-tabs .tab::after{
  content: '';
  display: block;
  position: absolute;
  height: 0rpx;
  width: 0rpx;
  border:21rpx solid transparent;
  border-left: 21rpx solid #ddd;
  right:-40rpx;
  top: 1rpx;
} */
.region-list .region-item {
  font-size: 30rpx;
  color: #282828;
  line-height: 80rpx;
  padding: 10rpx 30rpx;
  border-top: 1rpx solid #eee;
  &.active {
    color: #4e95fc;
  }
}

.map-prompt {
  width: 420rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #707070;
  text-align: center;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translate(-50%, 0);
}
.reload {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
}
.reload .center1 {
  width: 30rpx;
  height: 30rpx;
  border: 1rpx solid #4e95fc;
  border-radius: 50%;
  margin: 24rpx auto;
}
.reload .center2 {
  width: 25rpx;
  height: 25rpx;
  background: #4e95fc;
  border-radius: 50%;
  margin: 3rpx auto;
}
.container {
  position: relative;
  .container-location {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    background: #fff;
    border-radius: 25rpx;
  }
}
</style>
